<template>
	<div>
		<div class="steps">
			<van-steps :active="active">
				<van-step class="step">上传身份证</van-step>
				<van-step class="step">查验信息</van-step>
				<van-step class="step">提交成功</van-step>
			</van-steps>
		</div>
		<div v-if="active==0">
			<van-nav-bar title="拍照示例" />
			<div>
				<van-icon name="success" />
				<span>平铺身份证、身份证四边贴合照片边框</span>
			</div>
			<van-uploader class="uploader" :after-read="afterRead" accept="image/*" :max-size="7 * 1024 * 1024" @oversize="onOversize">
				<img src="./shenfen.jpg" alt="等待传图" class="imgPreview">
				<div class="preview-cover">
					<p class="hint">+ 点击此处上传身份证</p>
				</div>
			</van-uploader>
			<div>
				<dl class="errors">
					<dt><van-icon name="cross" />错误的照片样式：</dt>
					<dd>1、反光、太亮、曝光过量。</dd>
					<dd>2、拍摄角度过远、过于倾斜。</dd>
					<dd>3、身份证有污迹、划痕或折痕。</dd>
					<dd>4、一次拍摄多张身份证。</dd>
				</dl>
			</div>
		</div>
		<check-id-info v-if="active==1" :cardInfo="cardInfo" @checkOk="checkOk" :avatar="avatar"></check-id-info>
		<check-ok v-if="active==2"></check-ok>
	</div>
</template>

<script>
import CheckIdInfo from './CheckIdInfo.vue';
import CheckOk from './CheckOk.vue';
export default {
  name: 'ScanIdCard',
	components: {
    CheckIdInfo,
    CheckOk
	},
	data() {
		return {
			defaultImage: require("./shenfen.jpg"),
			fileList: [],
      active: 0,
      cardInfo: {},
      webUrl: window._CONFIG['webURL'] + '/',
      avatar: ''
		}
	},
	methods: {
		afterRead(file) {
      this.postImg(file);
		},
    // 压缩图片
    compress(img) {
      let canvas = document.createElement("canvas");
      let ctx = canvas.getContext("2d");
      //瓦片canvas
      let tCanvas = document.createElement("canvas");
      let tctx = tCanvas.getContext("2d");
      // let initSize = img.src.length;
      let width = img.width;
      let height = img.height;
      //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
      let ratio;
      if ((ratio = (width * height) / 4000000) > 1) {
        ratio = Math.sqrt(ratio);
        width /= ratio;
        height /= ratio;
      } else {
        ratio = 1;
      }
      canvas.width = width;
      canvas.height = height;
      //    铺底色
      ctx.fillStyle = "#fff";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      //如果图片像素大于100万则使用瓦片绘制
      let count;
      if ((count = (width * height) / 1000000) > 1) {
        // console.log("超过100W像素");
        count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
        //      计算每块瓦片的宽和高
        let nw = ~~(width / count);
        let nh = ~~(height / count);
        tCanvas.width = nw;
        tCanvas.height = nh;
        for (let i = 0; i < count; i++) {
          for (let j = 0; j < count; j++) {
            tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
            ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
          }
        }
      } else {
        ctx.drawImage(img, 0, 0, width, height);
      }
      //修复ios上传图片的时候 被旋转的问题
      // if (Orientation != "" && Orientation != 1) {
      //   switch (Orientation) {
      //     case 6: //需要顺时针（向左）90度旋转
      //       this.rotateImg(img, "left", canvas);
      //       break;
      //     case 8: //需要逆时针（向右）90度旋转
      //       this.rotateImg(img, "right", canvas);
      //       break;
      //     case 3: //需要180度旋转
      //       this.rotateImg(img, "right", canvas); //转两次
      //       this.rotateImg(img, "right", canvas);
      //       break;
      //   }
      // }
      //进行最小压缩
      let ndata = canvas.toDataURL("image/jpeg", 0.1);
      tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
      return ndata;
    },
    // 旋转图片
    rotateImg(img, direction, canvas) {
      //最小与最大旋转方向，图片旋转4次后回到原方向
      const min_step = 0;
      const max_step = 3;
      if (img == null) return;
      //img的高度和宽度不能在img元素隐藏后获取，否则会出错
      let height = img.height;
      let width = img.width;
      let step = 2;
      if (step == null) {
        step = min_step;
      }
      if (direction == "right") {
        step++;
        //旋转到原位置，即超过最大值
        step > max_step && (step = min_step);
      } else {
        step--;
        step < min_step && (step = max_step);
      }
      //旋转角度以弧度值为参数
      let degree = (step * 90 * Math.PI) / 180;
      let ctx = canvas.getContext("2d");
      switch (step) {
        case 0:
          canvas.width = width;
          canvas.height = height;
          ctx.drawImage(img, 0, 0);
          break;
        case 1:
          canvas.width = height;
          canvas.height = width;
          ctx.rotate(degree);
          ctx.drawImage(img, 0, -height);
          break;
        case 2:
          canvas.width = width;
          canvas.height = height;
          ctx.rotate(degree);
          ctx.drawImage(img, -width, -height);
          break;
        case 3:
          canvas.width = height;
          canvas.height = width;
          ctx.rotate(degree);
          ctx.drawImage(img, -width, 0);
          break;
      }
    },
    //将base64转换为文件
    dataURLtoFile(dataurl) {
      var arr = dataurl.split(","),
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], this.files.name, {
        type: this.files.type
      });
    },
    postImg(file) {
      this.$toast.loading({
        duration: 0,
        message: '图片上传中···',
        forbidClick: true,
        loadingType: 'spinner',
      });
      this.axios.post('/business/idCardOCR/discernIdCard', { idCard: file.content }).then((res) => {
        if(res.data.success) {
          this.$toast.clear();
          this.$toast.success('上传成功');
          this.cardInfo = res.data.result;
          // 存储图片由base64改为相对路径20220117
          // if(this.cardInfo.avatarUrl) {
          //   this.cardInfo.avatarUrl = 'data:image/jpeg;base64,' + this.cardInfo.avatarUrl;
          // }
          this.avatar = this.webUrl + this.cardInfo.avatarUrl;
          if(this.cardInfo.gender) {
            if(this.cardInfo.gender == '男') {
              this.cardInfo.gender = '1';
            }else if(this.cardInfo.gender == '女'){
              this.cardInfo.gender = '2';
            }
          }
          this.$nextTick(()=> {
            this.active = 1;
          })
        }else {
          this.$toast.fail(res.data.message);
        }
      })
    },
    checkOk() {
      this.active = 2;
    },
    onOversize(file) {
      console.log(file);
      this.$toast.fail({
        duration: 5000,
        message: '文件大小不能超过 7MB，请重新选择。'});
    },
	}
}
</script>

<style>
.uploader {
	width: 80%;
	margin: 10px;
}
.imgPreview {
	width: 100%;
	height: 100%;
}
.preview-cover {
	display: table;
  position: absolute;
  top: 0;
	left: 0;
  width: 100%;
	height: 100%;
	border-radius: 5%;
  color: #fff;
  font-size: 30px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}
.hint {
	vertical-align: middle;
	display: table-cell;
	color: rgba(241, 232, 232, 0.8);
}
.errors {
	display: inline-block;
  text-align: left;
	font-size: 20px;
}
.steps {
	width: 80%;
	height: 90px;
	margin: 0 auto;
}
.step {
	text-align: left
}
</style>